Page({
  avatar: '/images/function_icon/titleCalculation.jpeg', // 头像地址
  data: {
    nationalFlagList: [{
      type: '全部',
      list: [
        '/pages/imageTools/images/hat/10001.png',
        '/pages/imageTools/images/hat/10002.png',
        '/pages/imageTools/images/hat/10003.png',
        '/pages/imageTools/images/hat/10004.png',
        '/pages/imageTools/images/hat/10005.png',
        '/pages/imageTools/images/hat/10006.png',
        '/pages/imageTools/images/hat/10007.png',
        '/pages/imageTools/images/hat/10008.png',
        '/pages/imageTools/images/hat/10009.png',
        '/pages/imageTools/images/hat/10010.png',
        '/pages/imageTools/images/hat/10011.png',
        '/pages/imageTools/images/hat/10012.png',
        '/pages/imageTools/images/hat/10013.png',
        '/pages/imageTools/images/hat/10014.png',
        '/pages/imageTools/images/hat/10015.png',
        '/pages/imageTools/images/hat/10016.png',
        '/pages/imageTools/images/hat/10017.png',
        '/pages/imageTools/images/hat/10018.png',
        '/pages/imageTools/images/hat/10019.png',
        '/pages/imageTools/images/hat/10020.png',
        '/pages/imageTools/images/hat/10021.png',
        '/pages/imageTools/images/hat/10022.png',
        '/pages/imageTools/images/hat/10023.png',
        '/pages/imageTools/images/hat/10024.png',
        '/pages/imageTools/images/hat/10025.png',
        '/pages/imageTools/images/hat/10026.png',
        '/pages/imageTools/images/hat/10027.png',
        '/pages/imageTools/images/hat/10028.png',
        '/pages/imageTools/images/hat/10029.png',
        '/pages/imageTools/images/hat/10030.png',
        '/pages/imageTools/images/hat/10031.png',
        '/pages/imageTools/images/hat/10032.png',
        '/pages/imageTools/images/hat/10033.png',
        '/pages/imageTools/images/hat/10034.png',
        '/pages/imageTools/images/hat/10035.png',
        '/pages/imageTools/images/hat/10036.png',
      ]
    }, {
      type: '相框',
      list: [
        '/pages/imageTools/images/hat/10022.png',
        '/pages/imageTools/images/hat/10023.png',
        '/pages/imageTools/images/hat/10024.png',
        '/pages/imageTools/images/hat/10025.png',
        '/pages/imageTools/images/hat/10026.png',
        '/pages/imageTools/images/hat/10027.png',
        '/pages/imageTools/images/hat/10028.png',
        '/pages/imageTools/images/hat/10029.png',
        '/pages/imageTools/images/hat/10030.png',
      ]
    }, {
      type: '红旗',
      list: [
        '/pages/imageTools/images/hat/10001.png',
        '/pages/imageTools/images/hat/10002.png',
        '/pages/imageTools/images/hat/10003.png',
        '/pages/imageTools/images/hat/10004.png',
        '/pages/imageTools/images/hat/10005.png',
        '/pages/imageTools/images/hat/10006.png',
        '/pages/imageTools/images/hat/10007.png',
        '/pages/imageTools/images/hat/10008.png',
        '/pages/imageTools/images/hat/10009.png',

      ]
    }, {
      type: '文字',
      list: [
        '/pages/imageTools/images/hat/10014.png',
        '/pages/imageTools/images/hat/10015.png',
        '/pages/imageTools/images/hat/10016.png',
        '/pages/imageTools/images/hat/10017.png',
        '/pages/imageTools/images/hat/10018.png',
        '/pages/imageTools/images/hat/10019.png',
        '/pages/imageTools/images/hat/10020.png',
        '/pages/imageTools/images/hat/10021.png',
        '/pages/imageTools/images/hat/10022.png',
        '/pages/imageTools/images/hat/10023.png',
        '/pages/imageTools/images/hat/10024.png',
        '/pages/imageTools/images/hat/10025.png',
        '/pages/imageTools/images/hat/10026.png',
        '/pages/imageTools/images/hat/10027.png',
        '/pages/imageTools/images/hat/10028.png',
        '/pages/imageTools/images/hat/10029.png',
        '/pages/imageTools/images/hat/10030.png',
        '/pages/imageTools/images/hat/10031.png',
        '/pages/imageTools/images/hat/10032.png',
        '/pages/imageTools/images/hat/10033.png',
        '/pages/imageTools/images/hat/10034.png',
        '/pages/imageTools/images/hat/10035.png',
        '/pages/imageTools/images/hat/10036.png',
      ]
    }, {
      type: '创意',
      list: [
        '/pages/imageTools/images/hat/10010.png',
        '/pages/imageTools/images/hat/10011.png',
        '/pages/imageTools/images/hat/10012.png',
        '/pages/imageTools/images/hat/10013.png',
      ]
    }, ],
    typeIndex: 0, // 国旗类型下标
    flagIndex: 0, // 国旗下标
  },
  onReady() {
    const query = wx.createSelectorQuery()
    query.select("#myCanvas")
      .fields({
        node: true,
        size: true
      })
      .exec(res => {
        const canvas = this.canvas = res[0].node
        this.dpr = wx.getWindowInfo().pixelRatio
        this.ctx = canvas.getContext('2d')
        this.ctx.scale(this.dpr, this.dpr)
        this.setData({
          canvasWidth: this.canvasWidth = canvas.width = 400 * this.dpr,
          canvasHeight: this.canvasHeight = canvas.height = 400 * this.dpr
        })
        this.drawAvatarToCanvas()
      })
  },
  // 切换类型
  changeType(e) {
    this.setData({
      typeIndex: e.target.dataset.index
    })
  },
  // 切换国旗
  changeFlag(e) {
    this.setData({
      flagIndex: e.currentTarget.dataset.index
    })
    this.drawAvatarToCanvas()
  },
  // 选择头像
  async chooseAvatar() {
    wx.showActionSheet({
      itemList: ['从聊天会话选择', '从相册选择', '拍照'],
      success: async res => {
        if (res.tapIndex === 0) {
          let res2 = await wx.chooseMessageFile({
            count: 1,
            type: 'image',
          })
          this.avatar = res2.tempFiles[0].path
        } else if (res.tapIndex === 1) {
          // 选择本地图片
          let res2 = await wx.chooseMedia({
            count: 1,
            mediaType: ['image'],
            sourceType: ['album'],
            sizeType: ['original'],
          })
          this.avatar = res2.tempFiles[0].tempFilePath
        } else {
          // 选择本地图片
          let res2 = await wx.chooseMedia({
            count: 1,
            mediaType: ['image'],
            sourceType: ['camera'],
            sizeType: ['original'],
          })
          this.avatar = res2.tempFiles[0].tempFilePath
        }
        console.log('图片信息', this.avatar)
        this.drawAvatarToCanvas()
      },
      fail: err => {
        console.log(err.errMsg)
      }
    })
  },
  // 将头像与国旗绘制到canvas
  drawAvatarToCanvas() {
    console.log('开始绘制头像')
    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
    let img = this.canvas.createImage()
    img.src = this.avatar
    img.onload = () => {
      // console.log('绘制头像')
      this.ctx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight)

      let img2 = this.canvas.createImage()
      img2.src = this.data.nationalFlagList[this.data.typeIndex].list[this.data.flagIndex]
      img2.onload = () => {
        // console.log('绘制国旗')
        this.ctx.drawImage(img2, 0, 0, this.canvasWidth, this.canvasHeight)
        this.canvasToTempFilePath()
      }
    }
  },
  // 把当前画布指定区域的内容导出生成指定大小的图片
  canvasToTempFilePath() {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: this.canvasWidth,
      height: this.canvasHeight,
      destWidth: this.canvasWidth,
      destHeight: this.canvasHeight,
      canvas: this.canvas,
      success: res => {
        // console.log('导出', res.tempFilePath)
        this.setData({
          newAvatar: res.tempFilePath
        })

      },
      fail: err => console.log(err)
    })
  },
  // 保存头像
  saveAvatar() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.newAvatar,
      success: () => {
        wx.showToast({
          title: '新头像已保存至相册',
          icon: 'none'
        })
      },
      fail: err => console.log(err)
    })
  },
  onShareAppMessage() {
    return {
      title: "领取你的专属头像",
      path: "/pages/imageTools/pages/nationalFlag/index",
      imageUrl: this.data.newAvatar ? this.data.newAvatar : "/images/function_icon/flag.jpeg",
    }
  },
  onShareTimeline() {
    return {
      title: '领取你的专属头像',
      imageUrl: this.data.newAvatar ? this.data.newAvatar : "/images/function_icon/flag.jpeg",
    }
  },
})